<template>
  <div class="component-wrapper">
    <!-- 头像和动画文字 -->
    <div class="centered-content" v-show="!showDialog">
      <img
        class="open-dialog-btn"
        src="@/assets/logo/卓越班LOGO_2.jpg"
        @click="toggleDialog"
      />
      <div class="text-below">
        <span
          class="animated-text"
          :class="{ 'typing-animation': showAnimatedText }"
          >{{ animatedTextDisplay }}</span
        >
      </div>
    </div>

    <!-- 对话框 -->
    <div
      class="dialog-container"
      :class="{ 'show-dialog': showDialog }"
      ref="dialogContainer"
    >
      <!-- 输入框 -->
      <div class="input-box">
        <input
          v-model="inputText"
          type="text"
          placeholder="请输入消息"
          @keydown.enter="sendMessage"
        />
        <!-- 新增的图标和下拉框 -->
        <el-popover
          placement="top-start"
          title="标题"
          trigger="hover"
          v-model="showPopover"
        >
          <div
            class="icon-btn dropdown-btn send-icon"
            slot="reference"
            @click="showDropdown = !showDropdown"
          >
            <!-- 这里放入你想要的下拉框图标路径 -->
            <svg-icon icon-class="show"></svg-icon>
          </div>

          <el-popover
            placement="bottom"
            width="400"
            v-model="showDropdown"
            trigger="click"
          >
            <el-table :data="gridData">
              <el-table-column
                width="150"
                property="date"
                label="日期"
              ></el-table-column>
              <el-table-column
                width="100"
                property="name"
                label="姓名"
              ></el-table-column>
              <el-table-column
                width="300"
                property="address"
                label="地址"
              ></el-table-column>
            </el-table>
            <el-button slot="reference">点击这里显示下拉框</el-button>
          </el-popover>

          <p>输入常用语标题，可快捷调用常用语。</p>
        </el-popover>

        <div class="icon-btn send-icon" @click="sendMessage">
          <svg-icon icon-class="send"></svg-icon>
        </div>
      </div>

      <!-- 对话内容框 -->
      <div class="dialog" ref="conversation" v-if="showDialog">
        <div class="conversation">
          <div
            v-for="(message, index) in conversation"
            :key="index"
            :class="{
              'user-message': message.sender === 'user',
              'kimi-message': message.sender === 'kimi',
            }"
          >
            <div v-if="message.sender === 'user'" class="user-message">
              <p>{{ message.content }}</p>
              <div class="avatar user-avatar"></div>
            </div>
            <div v-else class="kimi-message">
              <div class="avatar kimi-avatar"></div>
              <p class="message-content">{{ message.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { chat } from "../../../api/kimiAPI/moonshotApi";

export default {
  data() {
    return {
      conversation: [],
      inputText: "",
      showDialog: false,
      showAnimatedText: false,
      animatedText: "谁的青春不迷茫",
      animatedTextIndex: 0,
      showPopover: false,
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      showDropdown: false, // 控制下拉框显示/隐藏的变量
    };
  },
  methods: {
    async sendMessage() {
      if (!this.inputText.trim()) return; // 如果输入为空则不发送

      try {
        // 发送消息，并添加到对话数组中
        const response = await chat("", "", this.inputText.trim());
        this.conversation.push({
          sender: "user",
          content: this.inputText.trim(),
        }); // 添加用户消息
        this.conversation.push({ sender: "kimi", content: response }); // 添加机器人回复

        // 清空输入框
        this.inputText = "";

        // 显示对话框
        this.showDialog = true;
      } catch (error) {
        console.error(error.message);
      }
    },
    toggleDialog() {
      this.showDialog = !this.showDialog;
      this.showAnimatedText = false;
    },
    animateText() {
      this.showAnimatedText = true;
      let index = 0;
      const interval = setInterval(() => {
        if (index < this.animatedText.length) {
          this.animatedTextIndex++;
          index++;
        } else {
          clearInterval(interval);
        }
      }, 100);
    },
    showPopover() {
      this.showPopover = true;
    },
    hidePopover() {
      this.showPopover = false;
    },
  },
  mounted() {
    this.animateText();
    this.$nextTick(() => {
      this.$refs.conversation.scrollTop = this.$refs.conversation.scrollHeight;
    });
  },
  computed: {
    animatedTextDisplay() {
      return this.animatedText.slice(0, this.animatedTextIndex);
    },
  },
};
</script>

<style scoped>
.dropdown-btn {
  position: absolute; /* 添加绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 5px; /* 距离左边5像素 */
  transform: translateY(-50%); /* 上下居中 */
  margin-left: 710px; /* 向左移动10像素 */
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.component-wrapper {
  background-size: 90%; /* 缩小背景图片为容器的 90% */
  background-position: center; /* 将背景图片置中 */
  min-height: 88vh; /* 设置最小高度，以确保背景图片铺满整个页面 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.el-button {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 10px;
}

.dialog-container {
  position: relative;
  width: 800px;
  margin: 100px auto;
  display: flex;
  flex-direction: column-reverse;
  z-index: 999;
}

.dialog {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 400px;
  overflow-y: auto;
}

.conversation {
  padding: 10px;
}

.user-message {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.kimi-message {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background-image: url("~@/assets/logo/面性男学生.png"); /* 用户头像图片路径 */
  background-size: cover;
  border-radius: 50%;
  margin: 0 10px;
}

.kimi-avatar {
  width: 40px;
  height: 40px;
  background-image: url("~@/assets/logo/智能机器人.png"); /* 人工智能头像图片路径 */
  background-size: cover;
  border-radius: 50%;
  margin: 0 10px;
}

.message-content {
  max-width: 70%;
  word-wrap: break-word;
}

.user-message p,
.kimi-message p {
  background-color: #e2f0ff;
  padding: 8px 12px;
  border-radius: 10px;
  display: inline-block;
}

.input-box {
  display: flex;
  align-items: center;
  position: relative; /* 添加相对定位 */
  margin-top: 20px; /* 向下移动输入框 */
  background-color: rgba(255, 255, 255, 0.7); /* 白色背景色，透明度为 0.7 */
}

.input-box input {
  flex: 1;
  padding-right: 40px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 60px;
}

.icon-btn {
  font-size: 30px;
  position: absolute; /* 添加绝对定位 */
  top: 50%; /* 垂直居中 */
  right: 10px; /* 距离右边10像素 */
  transform: translateY(-50%); /* 上下居中 */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.open-dialog-btn {
  display: block; /* 显示为块级元素 */
  margin-top: -150px; /* 调整与文字之间的间距 */
  width: 500px;
  height: 340px;
  cursor: pointer;
}

.centered-content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-below {
  margin-top: -40px;
}

.animated-text {
  color: white;
  font-size: 2em;
  width: 20ch; /* 设置为合适的宽度 */
  height: 1.5em;
  border-right: 1px solid transparent;
  font-family: Consolas, Monaco;
  word-break: break-all;
  overflow: hidden;
}

.typing-animation {
  animation: typing 4s steps(42, end), blink-caret 0.75s step-end infinite;
}

/* 打印效果 */
@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 20ch;
  }
}

/* 光标 */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: currentColor;
  }
}
</style>
